<template>
  <div>
    <el-skeleton :loading="loading" :rows="5" animated>
      <template #template>
        <el-card>
          <template #header>
            <div>
              <el-skeleton-item variant="h3" style="width: 40%" />
              <el-skeleton-item
                variant="rect"
                style="float: right; width: 1em; height: 1em"
              />
            </div>
          </template>
          <div class="flex-x-between">
            <el-skeleton-item variant="text" style="width: 30%" />
            <el-skeleton-item
              variant="circle"
              style="width: 2em; height: 2em"
            />
          </div>
          <div class="mt-5 flex-x-between">
            <el-skeleton-item variant="text" style="width: 50%" />
            <el-skeleton-item variant="text" style="width: 1em" />
          </div>
        </el-card>
      </template>
      <template v-if="!loading">
        <el-card shadow="never" class="h-full flex flex-col">
          <template #header>
            <div class="flex-x-between">
              <span class="text-gray">{{ title }}</span>
              <el-tag :type="tagType" size="small">{{ unit }}</el-tag>
            </div>
          </template>
          <div class="flex-x-between mt-2 flex-1">
            <div class="flex-y-center">
              <span class="text-lg">{{ dailyCount }}</span>
            </div>
            <slot name="icon">
              <svg-icon :icon-class="iconName" size="2em" />
            </slot>
          </div>
          <div class="flex-x-between mt-2 text-sm text-gray">
            <span>{{ totalLabel }}</span>
            <span>{{ totalCount }}</span>
          </div>
        </el-card>
      </template>
    </el-skeleton>
  </div>
</template>

<script setup>
// 定义组件props
const props = defineProps({
  // 卡片标题
  title: {
    type: String,
    default: '统计数据'
  },
  // 单位标签
  unit: {
    type: String,
    default: '日'
  },
  // 标签类型
  tagType: {
    type: String,
    default: 'success',
    validator: (value) => ['success', 'info', 'warning', 'danger'].includes(value)
  },
  // 每日数据
  dailyCount: {
    type: [Number, String],
    default: 0
  },
  // 总数据
  totalCount: {
    type: [Number, String],
    default: 0
  },
  // 总数据标签
  totalLabel: {
    type: String,
    default: '累计总数'
  },
  // 图标名称
  iconName: {
    type: String,
    default: 'default'
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  }
});

// 定义组件名称
defineOptions({
  name: 'StatCard'
});
</script>

<style lang="scss" scoped>
// 可以添加自定义样式
</style>

